<template>
  <div class="home">
    <h1>Home</h1>
    <p>Home page content</p>
 <h2>{{ data.str }}</h2>
 <h3>{{ data.number }}</h3>
 <h2>学生姓名{{data.studenNames}}</h2>
 <h2>学生姓名{{data.person}}</h2>
 <input type="button" value="点击" @click="changNum"/>
  </div>
</template>

<script setup lang="ts">
//在Vue先要声明响应式数据 reactive --作用
import { reactive } from 'vue'
//数据
let data:any=reactive({
  str:'hello world',
  number:100,
  studenNames:["张三","李四","王五"],
  person:{
    name:'张三',
    age:18,
    sex:'男'

  }
})
//函数
const changNum=()=>{
  console.log("我被调用了")
  data.number++
}
</script>

<style scoped>

</style>
